<template>
    <div class="amount-ratio-page">
        <div class="title-box">
            <div class="title">
                <p>支付金额占比</p>
            </div>
            <div>
                <el-date-picker
                    v-model="Data.times"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :disabled-date="disabledDate"
                    @calendar-change="calendarChange"
                    @change="onSubmit" />
            </div>
        </div>
        <div class="container">
            <div v-show="haveData" class="pie-charts">
                <div id="echarts_left" ref="leftEchartsRef"></div>
                <div id="echarts_right" ref="rightEchartsRef"></div>
            </div>
            <div v-show="!haveData" class="empty-data">
                <img class="img" src="@/assets/noData.png" alt="" />
                <div class="word">暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, nextTick, onMounted, inject } from 'vue';
import { payRatioDetail } from '@/api/ecommerce/wiseManList';
import { getDay } from '@/utils/utils';
import dayjs from 'dayjs';

const leftEchartsRef = ref(null);
const rightEchartsRef = ref(null);

const echarts: any = inject('ec');

const haveData = ref(true);

// 折线图数据
const Data = reactive({
    times: [getDay(-7), getDay(-1, true)],
    channel_data: [],
    talent_data: []
});

// 折线图配置项
const drawLeftPieEcharts = () => {
    const leftChart = echarts?.init(leftEchartsRef.value);
    const data = (Data.channel_data || []).map((x: any) => {
        return {
            value: x.num,
            name: x.name
        };
    });
    // 指定图表的配置项和数据
    const option = {
        title: {
            text: '渠道支付金额占比',
            left: 'center',
            bottom: '29'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '支付金额',
                type: 'pie',
                radius: '50%',
                data: data,
                label: {
                    show: true,
                    formatter: '{b}\n{c}',
                    lineHeight: 15
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    leftChart.setOption(option);
    nextTick(() => {
        leftChart.resize();
    });
    window.onresize = function () {
        leftChart.resize();
    };
};

const drawRightPieEcharts = () => {
    const rightChart = echarts?.init(rightEchartsRef.value);
    const data = (Data.talent_data || []).map((x: any) => {
        return {
            value: x.num,
            name: x.name
        };
    });
    // 指定图表的配置项和数据
    const option = {
        title: {
            text: '达人支付金额占比',
            left: 'center',
            bottom: '29'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '支付金额',
                type: 'pie',
                radius: '50%',
                data: data,
                label: {
                    show: true,
                    formatter: '{b}\n{c}',
                    lineHeight: 15
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    rightChart.setOption(option);
    nextTick(() => {
        rightChart.resize();
    });
    window.onresize = function () {
        rightChart.resize();
    };
};

// 点击日期选择器的时间
const selectTime = ref();
// 点击日期选择器时间编号
const calendarChange = (val: any) => {
    const [e] = val;
    selectTime.value = e;
};
// 不可选时间
const disabledDate = (time: any) => {
    const con1 = new Date(selectTime.value).getTime() - 90 * 24 * 60 * 60 * 1000;
    const con2 = new Date(selectTime.value).getTime() + 90 * 24 * 60 * 60 * 1000;
    return time < con1 || time > con2 || time.getTime() > new Date().setHours(-1);
};

// 重新生成数据
const onSubmit = async (val: any) => {
    if (!val || !val.length) {
        return;
    }
    const time = [
        dayjs(Data.times[0]).format('YYYY-MM-DD HH:mm:ss'),
        dayjs(Data.times[1]).format('YYYY-MM-DD 23:59:59')
    ];
    const data = await payRatioDetail({ time });
    Data.channel_data = data.channel_data || [];
    Data.talent_data = data.talent_data || [];
    haveData.value =
        Data.channel_data[0] && Data.channel_data[0].channel && Data.talent_data[0] && Data.talent_data[0].daren_openid;
    drawLeftPieEcharts();
    drawRightPieEcharts();
};

onMounted(() => {
    onSubmit(Data.times);
});
</script>

<style lang="scss" scoped>
.amount-ratio-page {
    background: #fff;
    border: 1px solid #eaeaea;
    font-family: PingFangSC-Medium, 'PingFang SC';

    .title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 24px;
        border-bottom: 1px solid #eaeaea;

        .title {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            color: #33302d;

            :deep(.box-icon) {
                text-align: center;
                font-size: 16px;
                margin-left: 4px;
                color: #969696;
                background: #fff;
                border-radius: 50%;
            }
        }
    }

    .container {
        padding: 0 24px;

        :deep(.zw-search-form) {
            background-color: #fff;
            padding: 17px 0;
        }

        .pie-charts {
            display: flex;

            #echarts_left {
                display: flex;
                justify-content: center;
                height: 400px;
                width: 50%;
            }

            #echarts_right {
                display: flex;
                justify-content: center;
                height: 400px;
                width: 50%;
            }
        }
    }

    .empty-data {
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        line-height: 40px;

        img {
            transform: translateX(15%);
        }

        .word {
            color: #909399;
            font-size: 14px;
        }
    }
}
</style>
